<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Login</title>
    </head>
    <body>
        <div id="app">
            <form>
                <div>
                    <label for="username">用户名：</label>
                    <input
                        type="text"
                        id="username"
                        v-model="loginForm.username"
                    />
                </div>

                <div>
                    <label for="password">密码：</label>
                    <input
                        type="password"
                        id="password"
                        v-model="loginForm.password"
                    />
                </div>

                <div>
                    <button @click.prevent="login">登录</button>
                </div>
            </form>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                loginForm: {
                    username: '',
                    password: '',
                },
            },
            methods: {
                login() {
                    console.log(this.loginForm);
                    axios.post('/login', this.loginForm).then((response) => {
                        console.log(response);
                        // if (response.data.code === 200) {
                        //     window.location.href = 'https://www.baidu.com';
                        // }
                    });
                },
            },
        });
    </script>
</html>
